<!DOCTYPE html>
<html>
<head>
	<title><%= title%></title>
  	<meta charset="utf-8"/>
  	<link rel="stylesheet" href="/stylesheets/style.css"/>
  	<link rel="shortcut icon" href="http://img4.dangdang.com/bottom/validate.gif"/>  
</head>
<body>
	<%include nav%>
    <div class="nav-type">
        <div class="nav clearfix">
            <div class="span1 kind head-kind"><div>分类</div></div>  
            <div class="span1 kind"><div class="book-kind1">言情小说</div></div>
            <div class="span1 kind"><div class="book-kind2">投资理财</div></div>
            <div class="span1 kind"><div class="book-kind3">运动健身</div></div>
            <div class="span1 kind"><div class="book-kind4">国学经典</div></div>
            <div class="span1 kind"><div class="book-kind5">人物传记</div></div>
            <div class="span1 kind"><div class="book-kind6">成功励志</div></div>
            <div class="span1 kind"><div class="book-kind7">健康养成</div></div>
            <div class="span1 kind"><div class="book-kind8">自然科学</div></div>
            <div class="span1 kind"><div class="book-kind9">计算机科学</div></div>
        </div>
    </div>
	<div id="kinds">
        <h3 class="h3-1">言情小说</h3>
        <ul class="kind-per clearfix">
            <% for(var i=0; i < 6; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-2">投资理财</h3>
        <ul class="kind-per clearfix">
            <% for(var i=6; i < 12; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-3">运动健身</h3>
        <ul class="kind-per clearfix">
            <% for(var i=12; i < 18; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-4">国学经典</h3>
        <ul class="kind-per clearfix">
            <% for(var i=18; i < 24; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-5">人物传记</h3>
        <ul class="kind-per clearfix">
            <% for(var i=24; i < 30; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-6">成功励志</h3>
        <ul class="kind-per clearfix">
            <% for(var i=30; i < 36; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-7">健康养成</h3>
        <ul class="kind-per clearfix">
            <% for(var i=36; i < 42; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-8">自然科学</h3>
        <ul class="kind-per clearfix">
            <% for(var i=42; i < 48; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
        <h3 class="h3-9">计算机科学</h3>
        <ul class="kind-per clearfix">
            <% for(var i=48; i < 54; i++) { %>
            <li class="book">
                <img class="book-img" data-id="<%= bookid[i]%>" src="<%= bookimg[i]%>" alt="">
                <p class="book-name"><%= bookname[i]%></p>
                <p class="free-info">
                    <span class="book-prize"><%= bookauthor[i]%></span>
                    <span class="time-free">限时免费 </span>
                </p>
            </li>
            <% } %>
        </ul>
	</div>
    <div class="up">
        <div class="innerUp">
            <div class="arrow1"></div>
            <div class="arrow2"></div>
        </div>
        
    </div>
	<% include footer %>
	<script src="/js/require.js"></script>
	<script>
		require.config({
	        paths: {
	            'jquery': '/js/jquery-2.1.3.min',
                'logined':'/js/logined'
	        }
	    });

	    require(['jquery','logined'], function($,Logined) {
	    	//nav定位
            $($(".nav .nav-child")[1]).addClass("one").siblings().removeClass("one");

            //查看图书
            $(".time-free").click(function(){
                localStorage.setItem("bookimg",$(this).parent().parent().find(".book-img").attr("src"));
                localStorage.setItem("bookname",$(this).parent().parent().find(".book-name").html());
            })

            //头部登陆头像显示的处理
            var username = localStorage.getItem("username"),
                userpass = localStorage.getItem("userpass");
            Logined.logined(username,userpass);

            //点击导航定位页面位置
            $(".nav-type").on("click",function(e){
                var target = $(e.target);
                if(target.hasClass("book-kind9")){
                    $("html,body").animate({scrollTop:$(".h3-9").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind8")){
                    $("html,body").animate({scrollTop:$(".h3-8").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind7")){
                    $("html,body").animate({scrollTop:$(".h3-7").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind6")){
                    $("html,body").animate({scrollTop:$(".h3-6").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind5")){
                    $("html,body").animate({scrollTop:$(".h3-5").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind4")){
                    $("html,body").animate({scrollTop:$(".h3-4").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind3")){
                    $("html,body").animate({scrollTop:$(".h3-3").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind2")){
                    $("html,body").animate({scrollTop:$(".h3-2").offset().top-100+'px'},400);
                }
                if(target.hasClass("book-kind1")){
                    $("html,body").animate({scrollTop:$(".h3-1").offset().top-100+'px'},400);
                }
            }) 

            //鼠标轮向下滚动，导航隐藏
            $(window).on('scroll',function(){  
                var scroll_top = $(window).scrollTop();  
                //鼠标滚动，消除书籍信息框
                if($(".book .read-detail")){
                    $(".read-detail").remove()
                }
                if(scroll_top>0){  
                    $(".bar").fadeOut(1000);  
                    $(".nav-type").css("top",0+"px");
                    // $(".nav-type").fadeIn(1000);
                }else{  
                    $(".bar").fadeIn(1000);   
                    $(".nav-type").css("top",65+"px"); 
                    // $(".nav-type").fadeOut(1000);
                }  
            });   

            //hover显示书籍信息；
            function appendFun(self,name,author){
                var read_detail = $('<div class="read-detail">\
                    <div class="arrow">\
                    <div class="arrow1"></div>\
                    <div class="arrow2"></div>\
                    </div>\
                    <h4>'+name+'</h4>\
                    <p class="auth">'+author+'</p>\
                    <p class="intro">书籍是人类进步的阶梯，正白纸黑字的告诉我们异样的人生真谛。</p>\
                    <div class="prize-info">限时免费，还不快快阅读</div>\
                    <a class="appendA" href="javascript:;">限时免费</a>\
                    <img class="device" src="/img/kinds-device.png">\
                </div>');
                self.append(read_detail);
            }

            $(".book").on("mouseover",function(){ 
                //先清除后显示
                if($(".book .read-detail")){
                    $(".read-detail").remove();
                }
                var self =$(this),
                    name = self.find(".book-name").html(),
                    author = self.find(".free-info").find(".book-prize").html();
                //创建图书信息
                appendFun(self,name,author); 
                self.find(".appendA").attr("href","/readbook");
                $(".read-detail .arrow").addClass("arrowLeft").removeClass("arrowRight"); 
                //判断书籍信息是否触及边界
                var contentWidth = $("#kinds").width(),
                    contentLeft = $("#kinds").offset().left,
                    thisLeft = $(this).offset().left;
                if(contentWidth+contentLeft-thisLeft<=315){
                    $(this).find(".read-detail").css("left","-315px");
                    $(".read-detail .arrow").addClass("arrowRight").removeClass("arrowLeft");
                }
            })
            //回到顶部
            $(".up").on("click",function(){
                $("html,body").animate({scrollTop:0},1000)
            })
            var t = $(window).height()-60;

            $(window).on('scroll',function(){
                var scroll_top = $(window).scrollTop();
                if(scroll_top>t){
                    $(".up").css({"position":"fixed","display":"block","top":t-100,"right":"50px"});
                }else{
                    $(".up").css({"display":"none"});
                }
            });
            
	    })
	</script>
    
</body>
</html>